export function colorImg(src, callback) {
    var imgSrc = src;
    // var node = document.getElementById('img_box')
    const imgEle = document.createElement("img");
    const canvas = document.createElement("canvas");
    imgEle.src = imgSrc;
    imgEle.crossOrigin = "";
    imgEle.onload = () => {
        var ctx = canvas.getContext("2d");
        var naturalImgSize = [imgEle.naturalWidth, imgEle.naturalHeight];
        canvas.width = naturalImgSize[0];
        canvas.height = naturalImgSize[1];

        //绘制到canvas
        ctx.drawImage(imgEle, 0, 0);
        //获取imageData：rgba像素点
        var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const leftSectionData = [];
        const rightSectionData = [];
        const oneLineImgDataLen = canvas.width * 4;

        imgData.data.forEach((colorVal, i) => {
            if (
                i % oneLineImgDataLen <= 0.5 * oneLineImgDataLen ||
                i % oneLineImgDataLen >= 0.6 * oneLineImgDataLen
            ) {
                const inLeft = i % oneLineImgDataLen <= 0.5 * oneLineImgDataLen;
                if (i % 4 === 0) {
                    // 获取rgb均值
                    const curAverageRGB =
                        (imgData.data[i] + imgData.data[i + 1] + imgData.data[i + 2]) / 3;
                    let leftOrRightRef = inLeft ? leftSectionData : rightSectionData;
                    //每个数组里存四个值：本颜色值中的r、g、b的均值，以及r、g、b三个值。
                    //均值一方面用于累加计算本区域的整体均值，然后再跟每个均值对比拿到与整体均值最接近的项的索引，再取该数组里的后三个值：rgb，对应着颜色
                    leftOrRightRef[leftOrRightRef.length] = [
                        curAverageRGB,
                        imgData.data[i],
                        imgData.data[i + 1],
                        imgData.data[i + 2],
                    ];
                }
            }
        });
        //generate average rgb
        const averageOfLeft = Math.round(
            leftSectionData.reduce((_cur, item) => {
                return _cur + item[0];
            }, 0) / leftSectionData.length
        );
        const averageOfRight = Math.round(
            rightSectionData.reduce((_cur, item) => {
                return _cur + item[0];
            }, 0) / rightSectionData.length
        );
        //find the most near color
        const findNearestIndex = (averageVal, arrBox) => {
            let _gapValue = Math.abs(averageVal - arrBox[0]);
            let _nearColorIndex = 0;
            arrBox.forEach((item, index) => {
                const curGapValue = Math.abs(item - averageVal);
                if (curGapValue < _gapValue) {
                    _gapValue = curGapValue;
                    _nearColorIndex = index;
                }
            });
            return _nearColorIndex;
        };
        // const leftNearestColor = leftSectionData[findNearestIndex(averageOfLeft, leftSectionData)]
        const rightNearestColor =
            rightSectionData[findNearestIndex(averageOfRight, rightSectionData)];
        // console.log(leftNearestColor, rightNearestColor)//rgba(${leftNearestColor[1]},${leftNearestColor[2]},${leftNearestColor[3]},1) 0%,
        // node.style.backgroundColor = `rgba(${rightNearestColor[1]},${rightNearestColor[2]},${rightNearestColor[3]})`
        callback(
            `rgba(${rightNearestColor[1]},${rightNearestColor[2]},${rightNearestColor[3]})`
        );
    };
}